<template xmlns:div="http://www.w3.org/1999/html">
  <div class="content">
    <h3>实现双向绑定</h3>
    输入内容：<input type="text" v-model="username"><br>
    <p v-text="username"></p>
    <!-- 添加一个按钮用于跳转到home页面 -->
    <button @click="goToHome">跳转到主页</button>
    <button @click="changeName">改名字</button>
    <div v-text="value"></div>
    <div v-html="value"></div>
    <div :title="title" title="div原生态属性">要被测试的div</div>
    <div :class="clsValue">测试颜色改变</div>
    <div v-for="(user,index) in dataList" :class="index%2==0?'':'bg1'">
      姓名:{{user.name}}&nbsp;&nbsp;&nbsp;年龄:{{user.age}}&nbsp;&nbsp;&nbsp;性别:{{user.gender}}&nbsp;&nbsp;&nbsp;
      联系电话:{{user.telephone}}
    </div>
    <button @click="changeShow">点击{{text}}</button>
    <div style="box-sizing:border-box;padding: 20px " v-if="isShow">点击按钮改变形式吧</div>
    <div>
      <h3>复选框的双向绑定</h3>
      <input type="checkbox" value="篮球" v-model="sport" />篮球
      <input type="checkbox" value="足球" v-model="sport" />足球
      <input type="checkbox" value="排球" v-model="sport" />排球
    </div>
    <div>
      <h3>单选按钮的双向绑定</h3>
      <input type="radio" value="男" v-model="gender" name="gender" />男
      <input type="radio" value="女" v-model="gender" name="gender" />女
      <input type="radio" value="保密" v-model="gender" name="gender" />保密
    </div>
    <div>
      <h3>下拉列表</h3>
      <select name="nation" id="nation" v-model="nation">
        <option value="">请选择</option>
        <option value="汉族">汉族</option>
        <option value="苗族">苗族</option>
        <option value="回族">回族</option>
      </select>
      <div>选中的民族是：{{ nation }}</div>
    </div>

  </div>
</template>

<script>
// 在vue包中引入reactive, toRefs
import { reactive, toRefs } from 'vue';

export default {
  //在 setup 函数中，this 是 undefined，因此不能直接使用 this 来访问组件的上下文
  setup() {
    const data = reactive({
      username: '初始值',
      age: 0,
      value:"<h3 style='color:red'测试v-html插值语法</h3>",
      title:"vue生成的提示信息",
      clsValue:'bg1',
      isShow:true,
      text:"隐藏",
      sport: ["篮球","足球"],
      gender: "保密",
      nation:"",
      dataList: [
        {
          name: "张小明",
          age: 20,
          gender: "男",
          telephone: "1256365888"
        },
        {
          name: "赵丽",
          age: 20,
          gender: "女",
          telephone: "1256365888"
        },
        {
          name: "钱多多",
          age: 20,
          gender: "男",
          telephone: "1256365888"
        },
        {
          name: "孙晓",
          age: 20,
          gender: "女",
          telephone: "1256365888"
        }
      ]
    })

    return {
      ...toRefs(data)
      // 需要将方法暴露到模板中
    }
  },
  //this 是组件实例，可以直接访问 this.$router、this.$route 等
  methods: {

    changeName(){
      if(this.clsValue=='bg1') this.clsValue='bg2';
      else this.clsValue='bg1';
      this.username="zhangfei";
    },
    // 定义跳转到主页的方法
     goToHome  ()  {
      // 使用Vue Router的编程式导航跳转到主页
      this.$router.push('/' ); // 假设主页的路径是'/'
    },
    changeShow(){
      if(this.isShow)
      {
        this.isShow=false;
        this.text="显现";
      }
      else {
        this.isShow=true;
        this.text="隐藏";
      }

    },

  }
}
</script>

<style>
.content {
  box-sizing: border-box;
  padding: 10px;
}
.bg1{
  background-color: #42b983;
}
.bg2{
  background-color: #1249d4;
}

input {
  height: 30px;
  width: 160px;
  border: 1px solid black;
  border-radius: 5px;
}

button {
  margin-top: 10px;
  padding: 5px 10px;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #f0f0f0;
  cursor: pointer;
}

button:hover {
  background-color: #e0e0e0;
}

</style>